<template>
  <div>
    <div class="toubudaohang flex ai-c">
      <el-radio-group v-model="tabPosition">
        <el-radio-button @click.native="$router.push('/layout/userlist')" label="userlist">用户列表</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 用户列表 -->
    <div class="user-List">
      <div class="user-content">
        <!-- 用户列表左边内容 -->
        <div class="user-Left">
          <div class="flex jc-sb" style="width: 100%">
            <div class="user-zu">
              <span>用户组<span style="color:#AFB2BC;margin-left: 6px;;">({{ totalGroupCount }})</span></span>
            </div>
            <div class="user-jia cursor" @click="userAdddialogVisible = true">
              <i style="color: #afb2bc" class="el-icon-plus"></i>
            </div>
          </div>
          <!-- 左边分组 -->
          <div class="left-content">
            <div style="height: auto">
              <!-- <div class="default">
                 <span> 未分组(265)</span>
              </div> -->
              <div class="w14 s-userkist ellipsis flex jc-sb" v-for="(item, index) in Usergrouplist" :key="index"
                :class="{ isUserlist: Userlist == index }" @click="setroles(item, index)">
                <div class="flex ai-c">
                  <img src="@/assets/wenjianjia.png" style="width: 13px; height: 12px; margin-right: 9px" alt="" />
                  <span class="ellipsis" style="max-width:150px;">{{ item.name }}</span><span
                    style="color:#AFB2BC;margin-left: 6px;;">({{
                        item.num
                    }})</span>
                </div>
                <div class="write flex jc-c ai-c" v-if="item.id != 1">
                  <img style="margin-left: 0" src="../assets/bi.png" alt="" @click="setuserEditdialogVisible(item)" />
                  <img src="../assets/del.png" class="del-pic" alt="" @click="handleChange(item)" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 用户列表右边内容 -->
        <div class="user-Right">
          <div class="head1">
            <div class="head-top flex jc-sb">
              <div class="flex ai-c">
                <div class="head-search" style="margin-right: 15px">
                  <el-input clearable v-model="content" placeholder="请输入用户名、姓名、手机号" class="search"></el-input>
                </div>
                <div class="user-select">
                  <el-select v-model="roleId" clearable placeholder="请选择角色">
                    <el-option label="全部" value=""> </el-option>
                    <el-option v-for="item in optionsClasslist" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <div class="user-select">
                  <el-select v-model="status" clearable placeholder="请选择状态">
                    <el-option v-for="item in optionsClass" :key="item.valueChoose" :label="item.labelChoose"
                      :value="item.valueChoose">
                    </el-option>
                  </el-select>
                </div>
                <div class="head-search-btn">
                  <el-button class="btn-search" @click="adminuseruserpage()"></el-button>
                </div>
              </div>
              <div class="flex ai-c">
                <div class="head-add-btn">
                  <el-button @click="setaddUserdialogVisible" class="add-btn">移动到</el-button>
                </div>
                <div class="head-Import-btn">
                  <el-button @click="setUserdialogVisible = true" class="add-btn btn-import">导入</el-button>
                </div>
                <div class="head-Import-btn">
                  <el-button @click="adduserdialog = true" class="add-btn btn-import">新增</el-button>
                </div>
              </div>
            </div>
          </div>
          <!-- 主题内容 -->
          <div class="body">
            <template>
              <el-table stripe :data="tables" ref="multipleTable" tooltip-effect="dark"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="account" label="用户名"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="手机号"> </el-table-column>
                <el-table-column prop="userGroupName" label="用户组">
                </el-table-column>
                <el-table-column prop="roleName" label="角色">
                </el-table-column>
                <el-table-column label="状态" width="120">
                  <template slot-scope="scope">
                    <el-switch :inactive-value="1" :active-value="0" v-model="scope.row.status"
                      @change="adminuseruserstatus(scope.row)">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="注册时间" width="150">
                </el-table-column>
                <el-table-column prop="loginTime" label="最后登录时间" width="150">
                </el-table-column>
                <el-table-column width="120" fixed="right" prop="birthday" label="操作" class="caozuo">
                  <template slot-scope="scope">
                    <div class="two-btn flex jc-sb">
                      <div class="del-have-btn cursor" style="margin-right: 10px" @click="adminuseruserinfo(scope.row)">
                        编辑
                      </div>
                      <div class="del-have-btn cursor" @click="setresetpassword(scope.row)">
                        重置密码
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <!-- 分页 -->
          <div class="page flex jc-c">
            <div class="page-numBer">
              <div class="block">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                  :current-page="pageNo" @current-change="currentchange">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 导入 -->

    <el-dialog title="导入" :visible.sync="setUserdialogVisible" width="400px">
      <div class="head-input head-input-set" v-loading="loading">
        <div class="head-upload">
          <el-upload accept=".xlsx" class="upload-demo" drag action="" :file-list="[]" :http-request="httprequest">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em style="color: #ff5478">点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">
                            只能上传jpg/png文件，且不超过500kb
                          </div> -->
          </el-upload>
          <!-- 测试模板 -->
          <!-- <a
                        href="http://haini-video.oss-cn-hangzhou.aliyuncs.com/file/excel/template/%E7%94%A8%E6%88%B7%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
                        download="导入用户(填好把文件上传).xlsx"
                        >下载模板</a
                      > -->
          <!-- 正式模板 -->
          <a href="https://hnsj-video.oss-cn-hangzhou.aliyuncs.com/newFile/excel/template/%E7%94%A8%E6%88%B7%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
            download="导入用户(填好把文件上传).xlsx">下载模板</a>
        </div>
      </div>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog class="resetpassword" title="重置密码" :visible.sync="resetpassword" width="445px" center>
      <p style="text-align: center">确认将该用户密码重置？</p>
      <p style="text-align: center">(重置后，初始密码为：123456a)</p>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="resetpassword = false">取 消</el-button>
        <el-button class="surebtn" @click="adminuseruserresetpwd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 移动用户 -->
    <el-dialog title="移动用户" :visible.sync="addUserdialogVisible" width="445px" center>
      <div class="head-input">
        <el-select style="width: 100%" v-model="valueSings" clearable placeholder="请选择分组">
          <el-option v-for="item in Usergrouplist" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="adduser-btn">
          <el-button class="cancelbtn" @click="addUserdialogVisible = false">取 消</el-button>
          <el-button class="surebtn" @click="adminuserusermove">确 定</el-button>
        </div>
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑分组" :visible.sync="userEditdialogVisible" width="445px" center>
      <div class="user-input">
        <el-input v-model="editusersid.name" type="text" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="(userEditdialogVisible = false), adminusergouplist()">取 消</el-button>
        <el-button class="surebtn" @click="adminusergroupupdate">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增分组" :visible.sync="userAdddialogVisible" width="445px" center>
      <div class="user-input">
        <el-input v-model="userInfo.name" type="text" placeholder="请输入分组名称" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="userAdddialogVisible = false">取 消</el-button>
        <el-button class="surebtn" @click="adminusergroupadd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增用户 -->
    <el-dialog title="新增用户" :visible.sync="adduserdialog" width="445px" center>
      <el-form label-width="80px" :model="formrulem" :rules="formrulemrules" ref="formrulem">
        <el-form-item prop="name" label="用户名">
          <el-input v-model.number="formrulem.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机号">
          <el-input v-model="formrulem.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="配置角色">
          <el-select style="width: 100%" v-model="formrulem.roleId" placeholder="请选择角色">
            <el-option v-for="item in optionsClasslist" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <div class="flex jc-c">
          <el-button class="cancelbtn" @click="adduserdialog = false">取 消</el-button>
          <el-button class="surebtn" @click="submitForm('formrulem')">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="删除提示" :visible.sync="dialogVisibledelShow" width="445px" center>
      <div class="del-questions" style="text-align: center">
        <p>确认删除分组?</p>
        <p style="color: #ff5478; font-size: 12px">
          (删除后，该分组下的用户将移至未分组。)
        </p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="dialogVisibledelShow = false">取 消</el-button>
        <el-button class="surebtn" @click="adminusergroupdel()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑" width="530px" center :visible.sync="editShowdialogVisible" class="informationtop">
      <!-- 基础信息 -->

      <div class="all-information">
        <div class="Basicinformation">
          <div class="information-span">
            <span class="jichuxini">基础信息</span>
          </div>
        </div>
        <div class="user-information flex jc-sb">
          <!-- 左边内容用户信息 -->
          <div class="user-information-left">
            <div class="user-information-text">
              <div>
                <span> <span style="color: #ff5478">*</span>用户名</span>
                <input type="text" style="color: #ccc" readonly v-model="editObj.account" placeholder="" />
                <!-- <el-input type="text"  style="width:152px;height:25px;"></el-input> -->
              </div>
              <div>
                <span><span style="color: #fff">*</span>微信号</span>
                <input type="text" v-model="editObj.weChat" />
              </div>
              <div>
                <span><span style="color: #ff5478">*</span>手机号</span>
                <input type="text" v-model="editObj.phone" />
              </div>
              <div>
                <span><span style="color: #fff">*</span><span style="color: #fff">剩</span>积分</span>
                <input
                  onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                  type="tel" v-model="editObj.scoreCard" />
              </div>
            </div>
          </div>
          <!-- 右边内容 -->
          <div class="user-information-right">
            <div class="user-information-text">
              <div>
                <span><span style="color: #ff5478">*</span>姓名</span>
                <input type="text" v-model="editObj.name" class="user-name" />
              </div>

              <div>
                <span><span style="color: #ffff">*</span>邮箱</span>
                <input type="text" value="邮箱" class="user-name" v-model="editObj.mail" />
              </div>
              <div class="flex">
                <span><span style="color: #fff">*</span>头像</span>
                <div style="margin-left: 24px; width: 152px">
                  <v-uploadImg style="display: inline-block" :isimgurl="editObj.headPic" @imgsuccess="imgsuccess" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 配置角色 -->
      <div class="Basicinformation-information">
        <div class="Basicinformation-bottom">
          <div class="Basicinformation-Configure">
            <span class="jichuxini">配置角色</span>
          </div>
        </div>
        <div class="information-def flex" v-for="item in checkList" :key="item.id">
          <span>{{ item.name }}</span>
          <el-checkbox-group v-model="checkListid">
            <el-checkbox v-for="it in item.roles" :key="it.id" :label="it.id">{{
                it.name
            }}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <!-- pei -->
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="editShowdialogVisible = false">取 消</el-button>
        <el-button class="surebtn" @click="adminuseruserupdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 手机号
var validatesurephone = (rule, value, callback) => {
  // 这里调用接口
  let reg_tel =
    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
  if (!reg_tel.test(value)) {
    callback(new Error("手机号不合法"));
  } else {
    callback();
  }
};
const cityOptions = [""];
import Vue from "vue";
import {
  adminusergouplist,
  adminusergroupadd,
  adminusergroupupdate,
  adminusergroupdel,
  adminuseruserpage,
  adminrolegrouplist,
  adminrolelist,
  adminuseruserstatus,
  adminuserusermove,
  adminuseruserresetpwd,
  adminuseruserinfo,
  adminuseruserupdate,
  adminuserimport,
  adminuseradd,
} from "@/api/index";
import uploadImg from "@/component/uploadImg/index.vue";
export default {
  components: {
    "v-uploadImg": uploadImg,
  },
  // 放数据
  data() {
    return {
      loading: false,
      baseUrl: this.$baseUrl,
      tables: [],
      navList: [
        {
          id: "1",
          name: "首页",
        },
        {
          id: "2",
          name: "视频管理",
        },
        {
          id: "3",
          name: "用户管理",
        },
        {
          id: "4",
          name: "数据统计",
        },
        {
          id: "5",
          name: "系统设置",
        },
      ],

      // 用户组
      userInfo: {
        name: "",
        // age: "",
        // loaction: "",
        // position: "",
        // major: "",
      },
      delUserlistdialogVisible: false,
      dialogVisible: false,
      userEditdialogVisible: false,
      dialogVisibledelShow: false,
      editShowdialogVisible: false,
      resetpassword: false,
      Usergrouplist: [],
      Userlist: 0,
      checkAll: false,
      delUserlist: false,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true,
      //   注册审核
      isUser: 0,
      groupbgs: 0,

      num: 0,
      isValue: true,
      isValuesecond: true,
      isValuethird: true,
      isValuefour: true,
      isValueSix: true,
      userAdddialogVisible: false,
      deladdDesigndialogVisible: false,
      moveShowdialogVisible: false,
      dialogVisible: false,
      checks: true,
      deldataShow: true,
      addUserdialogVisible: false,
      setUserdialogVisible: false,
      values: "",
      index: "",
      register: [
        {
          name: "注册审核",
        },
        {
          name: "用户列表",
        },
      ],

      optionsSings: [
        {
          valueSings: "选项1",
          labelSings: "单选",
        },
      ],
      valueSings: "",
      valueList: "",
      //   角色列表
      optionsClasslist: [],
      optionsClass: [
        {
          valueChoose: "",
          labelChoose: "全部",
        },
        { valueChoose: 0, labelChoose: "启用" },
        {
          valueChoose: 1,
          labelChoose: "禁用",
        },
      ],
      valueChoose: "",
      value: "",
      input: "",
      checkedrole: true,
      isActive: false,
      tabPosition: "left",
      checked: true,
      addUserclassdialogVisible: false,
      // 分页
      pageNums: [
        {
          Numones: 5,
          numBers: "5条/页",
        },
        {
          Numones: 10,
          numBers: "10条/页",
        },
        {
          Numones: 15,
          numBers: "15条/页",
        },
      ],

      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      optionsMove: [
        {
          valueMove: "选项1",
          labelMove: "请选择分组",
        },
        {
          valueMove: "选项2",
          labelMove: "单选",
        },
      ],
      tableData: [
        {
          username: "小张",
          name: "张三",
          loaction: "福建",

          number: "110",
          userGroup: "设计中心",
          roleList: "运营；管理员",
          lasttime: "2021-8-9 09:47:29",
        },
        {
          username: "李四",
          name: "李四",
          loaction: "福建",

          number: "120",
          lasttime: "-",
          userGroup: "设计中心",
          roleList: "运营",
        },
        {
          username: "张三",
          name: "张三",
          loaction: "福建",

          number: "119",
          lasttime: "2021-8-9 09:47:29",
          userGroup: "设计中心",
          roleList: "剪辑",
        },
        {
          username: "李四",
          name: "李四",
          loaction: "福建",

          number: "10010",
          lasttime: "2021-8-9 09:47:29",
          userGroup: "设计中心",
          roleList: "出片",
        },
        {
          username: "李四",
          name: "李四",
          loaction: "福建",

          number: "10086",
          lasttime: "2021-8-9 09:47:29",
          userGroup: "设计中心",
          roleList: "运营",
        },
      ],

      Vue: "",
      checkedrolesecond: false,
      checkedrolethird: false,
      checkedrolefour: false,
      checkedrolefive: false,
      valueMove: "",
      checkedrole: true,
      checked: true,
      // 设计中心
      DesigndialogVisible: false,

      // 导入
      setdialogVisible: false,
      // 编辑
      editdialogVisibleShow: false,
      // 默认角色
      checkedclip: false,
      checkedFilm: false,
      checkedleader: false,
      checkedoperate: true,
      checkedLast: false,
      //重置密码
      resetdialogVisible: false,
      editusersid: {},
      content: "",
      pageNo: 1,
      pageSize: 10,
      roleId: "",
      status: "",
      total: 0,
      userGroupId: "",
      ids: [],
      userid: "",
      editObj: {},
      checkList: [],
      checkListid: [],
      loading: false,
      tabPosition: "userlist",
      adduserdialog: false,
      formrulem: {
        phone: "",
        password: "",
        roleId: "",
      },
      formrulemrules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validatesurephone, trigger: "blur" },
        ],
      },
      totalGroupCount: 0
    };
  },
  created() {
    this.adminusergouplist();
    this.adminrolelist();
    this.adminrolegrouplist();
  },
  // 方法
  methods: {
    submitForm(formName) {
      this.loading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          adminuseradd({
            name: this.formrulem.name,
            phone: this.formrulem.phone,
            userGroupId: this.userGroupId,
            roleId: this.formrulem.roleId,
          }).then((res) => {
            this.$message.success("添加成功");
            // 调用接口
            this.loading = false;
            this.adduserdialog = false;
            this.adminuseruserpage();
            this.$refs[formName].resetFields();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    imgsuccess(imgUrl) {
      this.editObj.headPic = imgUrl;
    },
    httprequest(par) {
      this.loading = true;
      const formData = new FormData();
      formData.append("file", par.file);
      formData.append("userGroupId", this.userGroupId);
      adminuserimport(formData)
        .then((res) => {
          this.setUserdialogVisible = false;
          let l = '<div style="height:100px;overflow:auto;overflow:scroll;">';
          let r = "</div>";
          let str = "";
          res.data.failLists.forEach((item) => {
            str += `<p>姓名: ${item.name} 错误原因: <span style="color:red">${item.message}</span> </p>`;
          });
          str = l + str + r;
          if (res.data.failLists.length > 0) {
            this.$alert(str, "提示", {
              dangerouslyUseHTMLString: true,
            });
          } else {
            this.$message.success("导入成功");
          }

          this.loading = false;
          this.adminuseruserpage();
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    handlesuccess(res, file) {
      console.log(3);
    },
    adminrolegrouplist() {
      adminrolegrouplist().then((res) => {
        this.checkList = res.data;
      });
    },
    adminuseruserupdate() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      this.editObj.id = this.userid;
      this.editObj.roleIds = this.checkListid;
      if (!this.editObj.name || !this.editObj.phone) {
        this.$message.error("带星号必填");
        this.loading = false;
        return false;
      }
      // this.editObj.roleIds =
      adminuseruserupdate(this.editObj)
        .then((res) => {
          this.$message.success("修改成功");
          this.editShowdialogVisible = false;
          this.adminuseruserpage();
          this.checkListid = [];
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    adminuseruserinfo(item) {
      this.userid = item.id;
      adminuseruserinfo({
        id: item.id,
      }).then((res) => {
        this.editObj = res.data;
        console.log(this.editObj);
        this.checkListid = res.data.roleIds || [];
        this.editShowdialogVisible = true;
      });
    },
    setresetpassword(item) {
      this.userid = item.id;
      this.resetpassword = true;
    },
    adminuseruserresetpwd() {
      adminuseruserresetpwd({
        id: this.userid,
      }).then((res) => {
        this.$message.success("重置成功");
        this.resetpassword = false;
      });
    },
    adminuserusermove() {
      if (!this.valueSings) {
        this.$message.success("请选择分组");
        return false;
      }
      adminuserusermove({
        ids: this.ids.join(","),
        userGroupId: this.valueSings,
      }).then((res) => {
        this.$message.success("移动成功");
        this.adminuseruserpage();
        this.addUserdialogVisible = false;
      });
    },
    setaddUserdialogVisible() {
      if (this.ids.length == 0) {
        this.$message.error("请至少选择一个");
        return false;
      }
      this.addUserdialogVisible = true;
    },
    adminuseruserstatus(data) {
      adminuseruserstatus({
        id: data.id,
        status: data.status,
      }).then((res) => {
        this.$message.success("修改成功");
      });
    },
    adminrolelist() {
      adminrolelist({}).then((res) => {
        this.optionsClasslist = res.data;
        this.formrulem.roleId = this.optionsClasslist[0].id;
      });
    },
    setroles(item, index) {
      this.userGroupId = item.id;
      this.Userlist = index;
      this.pageNo = 1;
      this.adminuseruserpage();
    },
    currentchange(val) {
      this.pageNo = val;
      this.adminuseruserpage();
    },
    adminuseruserpage() {
      adminuseruserpage({
        content: this.content,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        roleId: this.roleId,
        status: this.status,
        userGroupId: this.userGroupId,
      }).then((res) => {
        this.tables = res.data.list;
        this.total = res.data.total;
        // 渲染dom
        // this.$nextTick(() => {
        //   let dom1 = document.querySelector(".left-content");
        //   let dom2 = document.querySelector(".user-Right");
        //   let offsetheight1 = dom2.offsetHeight;
        //   dom1.style.height = offsetheight1 - 100 + "px";
        // });
      });
    },
    adminusergroupdel() {
      adminusergroupdel({
        id: this.editusersid.id,
      }).then((res) => {
        this.$message.success("删除成功");
        this.dialogVisibledelShow = false;
        this.adminusergouplist();
      });
    },
    setuserEditdialogVisible(item) {
      this.userEditdialogVisible = true;
      this.editusersid = item;
    },
    adminusergroupupdate() {
      adminusergroupupdate({
        id: this.editusersid.id,
        name: this.editusersid.name,
      }).then((res) => {
        console.log(res);
        this.$message.success("更改成功");
        this.adminusergouplist();
        this.userEditdialogVisible = false;
      });
    },
    adminusergroupadd() {
      adminusergroupadd({
        name: this.userInfo.name,
      }).then((res) => {
        this.$message.success("添加成功");
        this.adminusergouplist();
        this.userAdddialogVisible = false;
        this.userInfo.name = "";
      });
    },
    adminusergouplist() {
      adminusergouplist().then((res) => {
        console.log(res);
        this.Usergrouplist = res.data.list
        this.totalGroupCount = res.data.sum
        if (!this.userGroupId) {
          this.userGroupId = this.Usergrouplist[0].id;
          this.adminuseruserpage();
        }
      });
    },
    handleChange(val) {
      this.editusersid = val;
      this.dialogVisibledelShow = true;
    },
    handleToDel() {
      //splice() 删除， 第一个参数Usergrouplist索引值为0,  第二个参数要删的数量
      this.Usergrouplist.splice(this.index, 1);
      this.dialogVisibledelShow = false;
    },
    //添加
    addUser() {
      if (!this.userInfo.name) {
        this.$message({
          message: "请输入分组名称！",
        });
        return;
      }

      this.Usergrouplist.push(this.userInfo);
      this.userInfo = {
        username: "",
        name: "",
        loaction: "",
        number: "",
        position: "",
        major: "",
      };
    },

    // 编辑
    setEdit() {
      if (!this.userInfo.username) {
        this.$message({
          message: "请输入用户名名称",
        });
        return;
      }
      this.tableData.push(this.userInfo);
      this.userInfo = {
        username: "",
        name: "",
        loaction: "",
        number: "",
        position: "",
        major: "",
      };
    },

    searchBtn() {
      console.log("查询");
    },

    // 用户组
    ChooseUser(index) {
      console.log(index);
      this.Userlist = index;
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    confirm() {
      this.dialogVisible = false;
      Vue.set(this.tableData, this.userIndex, this.editObj);
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 加号图片模态框
    userAdd() {
      this.$confirm(
        '<div class="userInput"><input type="text" placeholder="请输入分组名称" ></div>',
        "新增分组",
        {
          dangerouslyUseHTMLString: true,
        }
      );
    },
    //  重置密码
    grouping(num) {
      this.groupbgs = num;
    },
    handleSelectionChange(val) {
      this.ids = [];
      val.forEach((item) => {
        this.ids.push(item.id);
      });
    },
  },
  // 生命周期
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f2f2f2;");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>

<style lang="scss" scoped>
**::-webkit-scrollbar {
  display: block;
  height: auto;
}

.header {
  width: 100%;
  min-width: 1200px;
  height: 35px;
  display: flex;
  padding-top: 8px;

  justify-content: space-around;
  background-color: rgb(84, 92, 100);

  .header-left {
    margin-top: -4px;
    margin-left: 87px;
    color: white;

    span {
      display: inline-block;
      margin-left: 10px;
      font-size: 28px;
      font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
      font-weight: 700;
    }
  }

  .navBg {
    width: 120px;
    height: 41px;
    border-bottom: 1px solid rgb(255, 208, 75);
    border-bottom-color: rgb(255, 208, 75);

    a {
      color: rgb(255, 208, 75) !important;
    }
  }

  .header-nav {
    width: 787px;
    position: relative;
    top: -7px;
    // margin-top: 19px;
    margin-right: 458px;
  }

  .header-nav>div {
    width: 600px;
    display: flex;
    text-align: center;

    justify-content: center;

    div {
      width: 120px;
    }

    a {
      color: white;
      display: inline-block;
      padding-top: 8px;
      font-size: 18px;
      text-align: center;
      font-weight: 700;
      text-decoration: none;
    }
  }

  .header-login {
    width: 200px;
    margin-top: 3px;
    display: flex;
    justify-content: space-around;
  }

  .header-user {
    position: relative;
  }

  span {
    color: white;
    font-size: 14px;
    display: inline-block;
    margin-right: 10px;
  }

  img {
    position: absolute;
    top: 9px;
  }

  .header-out {
    span:hover {
      cursor: pointer;
    }
  }
}

.main {
  width: 100%;
  margin-top: 25px;
  min-width: 1200px;
}

.main-user {
  width: 1378px;
  height: 52px;
  padding-left: 53px;
  margin: 0 auto;
  display: flex;
  min-width: 1200px;
  background-color: white;
}

.main-user>div {
  width: 112px;
  height: 30px;
  margin-top: 12px;
  border-color: #aaaaaa;
  box-sizing: border-box;
  border: 1px solid #aaaaaa;
  text-align: center;
}

.main-user>div:hover {
  cursor: pointer;
}

a {
  font-size: 13px;
  text-decoration: none;
  margin-top: 5px;
  color: #333333;
  display: inline-block;
}

.userbg {
  background-color: #aaaaaa;

  a {
    color: white;
  }
}

// 用户注册
.register-content {
  width: 100%;
  min-width: 1200px;
  margin-top: 15px;
}

.register-text {
  width: 1378px;
  height: 535px;
  position: relative;
  min-width: 1200px;
  padding-left: 53px;
  margin: 0 auto;
  background-color: white;
}

h2 {
  text-align: center;
  padding-top: 15px;
}

// 用户列表内容

// 用户组
.isUserlist {
  // position: relative;
  background-color: #fff3f5;
}

.s-userkist {
  text-align: left;
}

.s-userkist:hover {
  // position: relative;
  background-color: #fff3f5;
}

.s-userkist:hover .write {
  display: flex;
  width: 50px;
}

.s-userkist span {
  // width: 160px;
  display: inline-block;
}

.write {
  width: 50px;
  display: none;
}

.isUserlist a {
  color: #02a7f0;
}

.user-List {
  // width: 100%;
  // min-width: 1200px;
  margin-top: 24px;
}

.user-content {
  display: flex;
  position: relative;
  // padding-bottom: 105px;
  scroll-padding-bottom: 20px;
}

.user-Left {
  width: 280px;
  // height: 398px;
  height: calc(100vh - 230px);
  overflow: auto;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  margin-right: 20px;

  .user-zu {

    // margin-right: 114px;
    span {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #2f3034;
    }
  }

  .user-jia {
    // margin-top: 6px;
  }

  .left-content {
    // width: 300px;
    margin-top: 15px;
  }

  .left-content .default {
    font-size: 14px;
    color: #333;
  }

  .left-content>div {
    // width: 270px;
    text-align: center;
  }

  .left-content .w14 {
    // width: 140px;
    height: 36px;
    cursor: pointer;
    //  padding-top: 5px;
    margin-bottom: 15px;
  }

  .left-content div a {
    text-align: center;
    padding-top: 5px;
  }

  .pic {
    width: 180px;
    display: flex;
    color: #02a7f0;
    padding-left: 49px;
    background-color: #f2f2f2f2;

    >div {
      padding-top: 10px;
      margin-left: 10px;
    }
  }

  .isgroup {
    background-color: #f2f2f2f2;
  }

  img {
    width: 14px;
    height: 14px;
    display: block;
    cursor: pointer;
    margin-left: 10px;
  }
}

.user-Right {
  padding: 20px;
  box-sizing: border-box;
  width: calc(100% - 300px);
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  overflow: hidden;

  .user-input {
    // width: 300px;
    // margin-right: 15px;
  }

  .user-select {
    margin-right: 15px;
  }

  .user-table {
    width: 1084px;
    margin-right: 56px;
    margin-bottom: 24px;
    border-radius: 3px;

    table {
      margin: 0 auto;
      height: 30px;
      border: 1px solid #f2f2f2;
      text-align: center;
      margin-top: 35px;
    }

    tr {
      text-align: center;

      td {
        width: 160px;
        height: 50px;
        line-height: 50px;
        border: 1px solid #f2f2f2;
        font-size: 13px;
        color: #333333;
      }

      .time {
        padding-left: 10px;
        padding-right: 10px;
      }

      .again-pwd {
        width: 248px;
        margin: 0 auto;
        justify-content: center;
        text-align: center;
        display: flex;
      }

      button {
        padding: 11px 15px;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 14px;
      }
    }
  }
}

.ThreeBtn {
  margin-right: 54px;
}

.head1 {
  // width: 1000px;
  margin: 0 auto;
}

.body {
  position: relative;
  padding-bottom: 41px;
  margin-top: 20px;
}

.big-table {
  text-align: center;
  width: 100%;
}

.el-dialog__header {
  text-align: left;
}

// .del-questions {
//   margin-left: 20px;
// }

// 编辑

.all-information {
  padding-bottom: 44px;
  border-bottom: 1px solid #f2f2f2;
  margin: 0 auto;
}

.Basicinformation {
  position: relative;

  .information-span {
    position: absolute;
    border-width: 0px;
    left: 0px;
    top: 0px;
    width: 3px;
    height: 16px;
    background: inherit;
    background-color: #ff5478;
    border: none;
    border-radius: 5px;
    box-shadow: none;
  }

  span {
    display: inline-block;
    width: 100px;
    position: absolute;
    left: 10px;
  }
}

.user-information {
  position: relative;
  top: 42px;

  .user-information-left {

    // width: 260px;
    // margin-right: 20px;
    .user-information-text {
      // width: 262px;
    }

    .user-information-text>div {
      margin-bottom: 20px;
      // text-align: center;
    }

    .user-information-text>div>input {
      width: 152px;
      margin-left: 10px;
    }

    .user-information-text>div>.mailbox {
      margin-left: 27px;
    }
  }

  .user-information-right {

    // width: 300px;
    .user-information-text {
      // width: 260px;
    }

    .user-information-text>div {
      margin-bottom: 20px;
      // text-align: center;
    }

    .user-information-text .headportrait {
      width: 152px;
    }

    .user-information-text .headportrait>span {
      display: inline-block;
      margin-left: 15px;
    }

    .user-information-text>div>input {
      width: 152px;
      margin-left: 10px;
    }

    .el-table .el-table__cell {
      text-align: center !important;
    }

    .user-information-text>div>.user-name {
      margin-left: 24px;
    }
  }
}

.el-dialog__body {
  padding: 30px 0px;
}

.big-table table {
  width: 80%;
  border: 1px solid #a6c1e4;

  font-family: Arial;

  border-collapse: collapse;
  margin: 0 auto;
  margin-bottom: 10px;
}

.big-table th {
  /* color: white; */
  /* border: 1px solid rgb(79, 129, 189);
		background-color: rgb(79, 129, 189); */
  border: 1px solid black;

  background-color: #71c1fb;

  width: 100px;

  height: 20px;

  font-size: 15px;
}

.big-table tr:nth-of-type(2) {
  background-color: #c7dff6;
}

.big-table tr:nth-of-type(4) {
  background-color: #c7dff6;
}

.big-table tr:nth-of-type(6) {
  background-color: #c7dff6;
}

.big-table table td {
  color: black;
  border: 1px solid #a6c1e4;
  height: 15px;

  padding-top: 5px;
  padding-bottom: 6.5px;

  text-align: center;
}

.big-table button:nth-of-type(1) {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;

  line-height: 1;

  cursor: pointer;

  border: 1px solid #dcdfe6;

  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;

  padding: 7px 15px;
  font-size: 12px;
  border-radius: 4px;
}

.big-table button:nth-of-type(2) {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
  margin-left: 3% !important;

  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  border: 1px solid #dcdfe6;

  text-align: center;

  box-sizing: border-box;
  outline: 0;

  margin-left: 1%;
  transition: 0.1s;
  font-weight: 500;
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 4px;
}

.big-table button:nth-of-type(3) {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
  margin-left: 3% !important;

  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  border: 1px solid #dcdfe6;

  text-align: center;

  box-sizing: border-box;
  outline: 0;

  margin-left: 1%;
  transition: 0.1s;
  font-weight: 500;
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 4px;
}

.btn {
  width: 600px;
  margin-bottom: 20px;
  margin-left: 192px;
}

// 重置密码
.resetpassword {
  text-align: left;
}

.resetpassword p {
  color: #333333;
}

.resetpassword p:nth-of-type(2) {
  color: red;
  font-size: 12px;
}

.btn button {
  background-color: #4caf50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn button:nth-of-type(2) {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn button:nth-of-type(3) {
  background-color: #008cba;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn button:nth-of-type(4) {
  background-color: #555555;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.head-top {
  .head-input {
    width: 500px;
    margin-right: 15px;

    .head-input-name {
      width: 486px;
      margin-left: 27px;
    }

    input {
      width: 256px;
      display: block;
      margin: 0 auto;
    }
  }

  .head-add {
    width: 100px;

    button {
      width: 80px;
    }
  }
}

.adduser-btn {
  margin-top: 37px;
}

.el-button {
  font-size: 14px !important;
  // padding: 8px 15px !important;
  // margin-left: 0;
}

.two-btn ::v-deep .el-button {
  margin-left: 0;
}

.search {
  // width: 300px !important;
  // margin-top: -2px;
}

.btn-import {
  display: inline-block;
}

.reset {
  margin-right: 10px !important;
}

.el-col-3 {
  width: 7.6% !important;
}

.btn-search {
  // margin-top: 32.5% !important;
}

.el-message {
  top: 13% !important;
}

.el-button.is-circle {
  border-radius: 5% !important;
  padding: 12px;
}

.el-row {
  margin-bottom: 2%;
  margin-top: 1%;
}

.red {
  color: red;
  font-size: 12px;
}

.choose {
  width: 254px;
  height: 35px;
  margin-left: 67px;
  margin-top: 20px;
}

// 加号模态框
.user-input {
  .user-input-model {
    width: 188px;
    height: 33px;
    outline: none;
    margin-bottom: 20px;
    padding-left: 5px;
    border-radius: 3px;
    border: 1px solid rgb(153, 153, 153);
  }
}

.setpic {
  width: 248px;

  margin: 0 auto;
  border-radius: 10px;
  border: 1px dashed gray;

  input {
    margin: 18px;
    margin-left: 52px;
  }
}

.setMo {
  margin-top: 20px;
  margin-left: 150px;
  text-decoration: underline;
  color: #169bd5;
  font-size: 14px;
}

.edit {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 5px;

  p {
    margin-left: 10px;
  }
}

.user-infomation {
  width: 500px;
  margin: 0 auto;
}

.information {
  margin-top: 15px;
  margin-left: 10px;

  p {
    //  font-weight:bold;
    color: #333333;
    font-size: 14px;
  }
}

// 配置角色
.Basicinformation-information {
  // width: 513px;
  padding-bottom: 40px;
  border-bottom: 1px solid #f2f2f2;
  margin: 0 auto;
}

.Basicinformation-bottom {
  position: relative;
  margin-top: 20px;
}

.Basicinformation-Configure {
  position: absolute;
  border-width: 0px;
  left: 0px;
  top: 0px;
  width: 3px;
  height: 16px;
  background: inherit;
  background-color: #ff5478;
  border: none;
  border-radius: 5px;
  box-shadow: none;
}

.Basicinformation-Configure span {
  display: inline-block;
  width: 100px;
  position: absolute;
  left: 10px;
}

.information-def {
  position: relative;
  top: 33px;
  left: 26px;
  display: flex;
  flex-wrap: wrap;

  .el-checkbox {
    width: 62px;
    margin-left: 18px;
    padding-bottom: 15px;
  }

  .check-five {
    margin-left: 73px;
  }
}

.sure-del {
  text-align: left;
}

// 移动到
.user-move {
  width: 300px;
  margin: 0 auto;
}

.again {
  text-align: left;
}

// 导入
.head-Import-btn {
  margin-left: 10px;
}

.head-input-set {
  // width: 544px;
  // text-align: center;

  a {
    width: 365px;
    text-align: left;
    text-decoration: underline;
    margin-top: 8px;

    font-size: 14px;
    color: #169bd5;
  }
}

.head-upload {
  text-align: center;
}

.upload-demo {
  // width: 588px;
  text-align: center;
}

.el-upload-dragger {
  margin-bottom: 20px !important;
}

.upload {
  width: 300px;
  margin: 0 auto;
}

// 分页
.page {
  width: 100%;
  display: flex;
}

.page-num {
  width: 58px;
  margin-top: 10px;
  // margin-right: 15px;
}

span {
  font-size: 14px;
}

.page-select {
  width: 100px;
  margin-right: 20px;

  input {
    height: 21px;
  }
}

.page-numBer {
  margin-top: 4px;
}

.go-page {
  width: 500px;
  margin-top: 5px;

  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }

  input {
    width: 35px;
    outline: none;
    border-radius: 3px;
    height: 25px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}

.up-pic {
  width: 248px;
  text-align: center;

  img {
    margin-top: 15px;
  }
}

.fen {
  width: 265px;
  margin: 0 auto;
  height: 35px;
  outline: none;
  margin-bottom: 20px;
  padding-left: 5px;
  border-radius: 3px;
  border: 1px solid rgb(153, 153, 153);
}

.el-input__icon {
  line-height: 21px !important;
}

.el-button--primary {
  margin-right: 0 !important;
}

.el-table .cell,
.el-table--border .el-table__cell:first-child .cell {
  text-align: center !important;
}

// 编辑
.editShow {
  text-align: left;
  height: 36px;

  margin-left: 15px;
  border-left: 2px solid rgba(22, 155, 213, 1);

  p {
    font-size: 14px;
  }
}

// .el-dialog__body {
//   padding: 0 0;
// }

.user-top {
  width: 236px;
  text-align: left;
  position: relative;
  border-left: 2px solid rgba(22, 155, 213, 1);
  height: 16px;

  p {
    font-weight: bold;
    position: absolute;
    top: -15px;
    left: 8px;
    color: #333333;
    height: 0px;
  }
}

.user-main {
  width: 560px;
  display: flex;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 15px;
  margin-bottom: 15px;
  justify-content: space-around;

  .user-left {
    width: 322px;

    .user-left-content {
      margin-left: 20px;

      span {
        display: inline-block;
        margin-right: 15px;
      }

      input {
        width: 152px;
        height: 24px;
        border: 1px solid rgba(215, 215, 215, 1);
        border-radius: 3px;
        padding-left: 3px;
        outline: none;
      }

      .emila {
        margin-left: 19px;
      }

      .phone {
        margin-left: 6px;
      }
    }
  }
}

.user-roles {
  width: 560px;
  margin: 0 auto;

  .defroles {
    display: inline-block;
    margin-right: 15px;
  }
}

th {
  text-align: center !important;
}

.el-table th.el-table__cell>.cell {
  text-align: center;
}

.el-dialog {
  width: 600px !important;
  padding-bottom: 40px;
}

.el-dialog__body {
  min-width: 600px;
}

.el-dialog__body>.head-input-set {
  height: 200px;
}

.el-dialog__footer {
  padding: 1px 20px 20px;
}

.el-descriptions__body table {
  border: none !important;
}

.el-descriptions__body table td {
  border: none !important;
}

.el-descriptions__header {
  margin-bottom: -32px;
}

.el-descriptions-item__container {
  padding-left: 10px;
}

.el-dialog__header {
  text-align: left;
  border-bottom: 1px solid #f2f2f2;
}
</style>
<style scoped lang="scss">
.toubudaohang {
  width: 100%;
  height: 84px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding-left: 30px;
  box-sizing: border-box;
}
</style>
<style scoped lang="scss">
.head-search-btn {
  height: 40px;
  margin-right: 15px;

  button:nth-of-type(1) {
    width: 61px;
    height: 40px;
    background-size: 19px 20px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    text-align: center;
    // border-radius: 5px;
    background-color: #ff5478;
    background-image: url("../assets/btnsearch.png");

    align-items: center;
  }
}

.head-add-btn {
  height: 40px;

  // margin-right: 15px;
  button:nth-of-type(1) {
    width: 96px;
    height: 40px;
    color: #f5f5f5;
    text-align: center;
    border: none;
    // border-radius: 5px;
    background-color: #ff5478;
    /* 不支持线性的时候显示 */
    background-image: linear-gradient(to left, #ff5478, #ff7aaf);

    align-items: center;
  }
}

.head-Import-btn {
  height: 40px;

  button:nth-of-type(1) {
    width: 96px;
    height: 40px;
    color: #ffffff;
    text-align: center;
    border: none;
    // border-radius: 5px;
    background-color: #ff5478;
    /* 不支持线性的时候显示 */
    background-image: linear-gradient(to left, #ff5478, #ff7aaf);

    align-items: center;
  }
}

.del-have-btn {
  color: #ff5478;
}

.jichuxini {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #afb2bc;
}
</style>